<template>
  <!-- 搜索条件 -->
  <el-card class="top">
    <el-form class="search-form">
      <div class="top-left">
        <!-- 书名 -->
        <el-form-item label="图书名称：" prop="bookName">
          <el-input
              v-model="searchDataForm.bookName"
              clearable
              :prefix-icon="Memo"
              placeholder="请你输入搜索图书名称"
          />
        </el-form-item>
        <!-- 作者名称 -->
        <el-form-item label="作者名称：" prop="authorName">
          <el-input
              v-model="searchDataForm.authorName"
              clearable
              :prefix-icon="User"
              placeholder="请你输入搜索图书名称"
          />
        </el-form-item>
      </div>
      <!-- 按钮 -->
      <el-form-item>
        <el-button type="primary" @click="searchForm">
          搜索
        </el-button>
        <el-button @click="resetForm">
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <div class="book-info-card">
    <el-card v-for="(item) in records" :key="item.id"
             class="card-item"
             body-class="card-body"
    >
      <el-image
          :src="item.bookCover"
          class="image"
      />
      <div style="padding: 14px">
        <!-- 书名 -->
        <el-row>
          <el-text>书名：《{{ item.bookName }}》</el-text>
        </el-row>
        <!-- 作者 -->
        <el-row>
          <el-text>
            作者：
            <el-tag>{{ item.bookAuthorName }}</el-tag>
          </el-text>
        </el-row>
        <!-- 评价 -->
        <el-row>
          <el-text>评价：</el-text>
          <el-rate
              v-model="item.evaluate"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value} 星"
          />
        </el-row>
        <!-- 状态 -->
        <el-row>
          <el-text>
            <span>状态：</span>
            <el-tag>{{ caseBookStatus(item.bookStatus) }}</el-tag>
          </el-text>
        </el-row>
        <!-- 描述 -->
        <el-row>
          <el-tooltip
              class="box-item"
              effect="dark"
              :content="item.bookIntroduction"
              placement="top-start"
          >
            <el-text truncated>描述：{{ item.bookIntroduction }}</el-text>
          </el-tooltip>
        </el-row>
        <!-- 按钮 -->
        <div class="bottom">
          <!-- 详情 -->
          <div class="bottom-left">
            <el-tooltip
                class="box-item"
                effect="dark"
                content="详情"
                placement="top-start"
            >
              <el-button type="primary"
                         :icon="InfoFilled"
                         circle
                         @click="details(item)"
              />
            </el-tooltip>
          </div>
          <!-- 删除 -->
          <div class="bottom-right-right">
            <el-tooltip
                class="box-item"
                effect="dark"
                content="删除"
                placement="top-start"
            >
              <el-popconfirm :title="`你确定要删除《${item.bookName}》吗?`" width="260px"
                             @confirm="deleteBook(item.id)"
              >
                <template #reference>
                  <el-button type="danger" :icon="Delete" circle/>
                </template>
              </el-popconfirm>
            </el-tooltip>
          </div>
        </div>
      </div>
    </el-card>
  </div>
  <!-- 页码 -->
  <div class="page-bottom">
    <!-- 分页器 -->
    <el-pagination v-model:current-page="pageNumber"
                   v-model:page-size="pageSize"
                   :page-sizes="[5, 10, 15, 20]"
                   :background="true"
                   layout="prev, pager, next, jumper,->,sizes,total"
                   :total="totalRow"
                   @current-change="searchForm"
                   @size-change="searchForm"
    />
  </div>

  <!-- 弹窗 -->
  <el-dialog v-model="visible"
             :show-close="false"
             :data="bookInfo"
              width="70%"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">图书详情</h4>
        <el-button type="danger" @click="close">
          <el-icon class="el-icon--left">
            <CircleCloseFilled/>
          </el-icon>
          <span>关闭</span>
        </el-button>
      </div>
    </template>
    <!-- 主体 -->
    <div class="dialog-container">
      <!-- 左侧 -->
      <div class="dialog-container-left">
        <el-image
            :src="bookInfo.bookCover"
            style="width: 30vh; height: 40vh"
        />
      </div>
      <!-- 右侧 -->
      <div class="dialog-container-right">
        <el-descriptions title="主要信息" :column="1" border>
          <!-- 书名 -->
          <el-descriptions-item
              label="书名"
              label-align="left"
              align="left"
          >
            《{{ bookInfo.bookName }}》
          </el-descriptions-item>
          <!-- 作者 -->
          <el-descriptions-item
              label="作者"
              label-align="left"
              align="left"
          >
            {{ bookInfo.bookAuthorName }}
          </el-descriptions-item>
          <!-- 评价 -->
          <el-descriptions-item
              label="评价"
              label-align="left"
              align="left"
          >
            <el-rate
                v-model="bookInfo.evaluate"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value} 星"
            />
          </el-descriptions-item>
          <!-- 状态 -->
          <el-descriptions-item
              label="状态"
              label-align="left"
              align="left"
          >
            <el-tag>
              {{ caseBookStatus(bookInfo.bookStatus) }}
            </el-tag>
          </el-descriptions-item>
          <!-- 出版社 -->
          <el-descriptions-item
              label="出版社"
              label-align="left"
              align="left"
          >
            {{ bookInfo.press }}
          </el-descriptions-item>
          <!-- 出版日期 -->
          <el-descriptions-item
              label="出版日期"
              label-align="left"
              align="left"
          >
            {{ bookInfo.publicationDate }}
          </el-descriptions-item>
          <!-- 描述 -->
          <el-descriptions-item
              label="描述"
              label-align="left"
              align="left"
          >
            {{ bookInfo.bookIntroduction }}
          </el-descriptions-item>
          <!-- 作者描述 -->
          <el-descriptions-item
              label="作者描述"
              label-align="left"
              align="left"
          >
            {{ bookInfo.authorPress }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue'
import {Delete, InfoFilled, Memo, User} from "@element-plus/icons-vue";
import {deleteBookReq, pageBookBaseInfoReq} from "@/api/base/book-base.ts";

interface SearchData {
  bookName: string
  authorName: string
}

interface Records {
  id: string
  bookName?: string
  bookAuthorId?: string
  typeId1?: string
  typeId2?: string
  typeId3?: string
  press?: string
  publicationDate?: string
  bookCover?: string
  bookIntroduction?: string
  bookDirectory?: string
  evaluate?: string
  bookSource?: string
  bookStatus?: string
  term?: string
  borrowTime?: string
  returnTime?: string
  overdueTime?: string
  overdueDebt?: string
  bookAuthorName?: string
  authorTelephone?: string
  authorEmail?: string
  authorPress?: string
}

const book: Records = {
  id: '',
  bookName: '',
  bookAuthorId: '',
  typeId1: '',
  typeId2: '',
  typeId3: '',
  press: '',
  publicationDate: '',
  bookCover: '',
  bookIntroduction: '',
  bookDirectory: '',
  evaluate: '',
  bookSource: '',
  bookStatus: '',
  term: '',
  borrowTime: '',
  returnTime: '',
  overdueTime: '',
  overdueDebt: '',
  bookAuthorName: '',
  authorTelephone: '',
  authorEmail: '',
  authorPress: '',
};

// 默认页码
const pageNumber = ref<number>(1);
// 默认每页条数
const pageSize = ref<number>(5);
// 总条数
const totalRow = ref<number>(0);
// 存储图书数据
const records = ref<Records[]>([]);
// 弹窗
const visible = ref(false)
// 图书详情
const bookInfo = ref<Records>(book)
// 搜索条件
const searchDataForm = reactive<SearchData>({
  bookName: '',
  authorName: ''
})

// 初始化
onMounted(() => {
  pageBookBaseInfo()
})

// 分页
const pageBookBaseInfo = async () => {
  const data = {
    pageNumber: pageNumber.value,
    pageSize: pageSize.value
  }
  const result: any = await pageBookBaseInfoReq(data)
  if (result.code === 1000_0000) {
    totalRow.value = result.data.totalRow
    records.value = result.data.records
    console.log(totalRow.value, records.value)
  }
}

// 搜索表单
const searchForm = async () => {
  const data = {
    bookName: searchDataForm.bookName,
    authorName: searchDataForm.authorName,
    pageNumber: pageNumber.value,
    pageSize: pageSize.value
  }
  const result: any = await pageBookBaseInfoReq(data)
  if (result.code === 1000_0000) {
    console.log(result.data)
    totalRow.value = result.data.totalRow
    records.value = result.data.records
  }
}
// 重置表单
const resetForm = () => {
  searchDataForm.bookName = ''
  searchDataForm.authorName = ''
}

// 详情
const details = (item: Records) => {
  bookInfo.value = item
  visible.value = true
}

// 删除
const deleteBook = async (id: string) => {
  let result: any = await deleteBookReq(id);
  if (result.code === 1000_0000) {
    ElMessage({type: 'success', message: '删除成功'});
    //浏览器自动刷新一次
    await pageBookBaseInfo()
  }
}

// 图书状态（0：在库中 1：借阅申请中 2：已借阅 3：归还申请中 4：已归还 5：丢失 6：废弃）
const caseBookStatus = (status: string) => {
  switch (status) {
    case '0':
      return '在库中'
    case '1':
      return '借阅申请中'
    case '2':
      return '已借阅'
    case '3':
      return '归还申请中'
    case '4':
      return '已归还'
    case '5':
      return '丢失'
    case '6':
      return '废弃'
    default:
      return '未知'
  }
}

</script>

<style lang="scss">
.top {
  margin-bottom: 2vh;

  .top-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 50%;
  }

  .search-form {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-form-item {
      margin-bottom: 0;

      .el-input {
        width: 220px;
      }
    }
  }
}


.book-info-card {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;

  .image {
    display: block;
    height: 40vh;
  }

  .card-item {
    .card-body {
      padding: 0;

      .el-row {
        height: 32px;
      }
    }
  }

  .bottom {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-content: center;
    align-items: center;
    justify-items: center;

    .bottom-left {
      grid-row: 1;
      grid-column: 1;
    }

    .bottom-right-right {
      grid-row: 1;
      grid-column: 6/6;
    }
  }

}

.page-bottom {
  margin-top: 2vh;
}

.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.dialog-container {
  display: flex;

  .dialog-container-left {
    margin: 0 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dialog-container-right {
    display: flex;
    justify-content: center;
    align-items: center;
  }

}
</style>
